<template>
  <div class="noo">
    <div class="no">
      <a-list class="demo-loadmore-list" :item-layout="config.layout" :data-source="list">
        <!-- <template #loadMore>
      <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
        <a-spin v-if="loadingMore" />
        <a-button v-else @click="loadMore">loading more</a-button>
      </div>
    </template> -->
        <template #renderItem="{ item }">
          <a-list-item>
            <template #actions>
              <EditOutlined :style="{ fontSize: '18px' }" @click="edit(item)" v-if="config.edit" />
              <DeleteOutlined :style="{ fontSize: '18px' }" @click="del(item)" v-if="config.del" />
              <TabletOutlined :style="{ fontSize: '18px' }" @click="othenBtnOne(item)" v-if="config.othenBtnOne" />
              <DiffOutlined :style="{ fontSize: '18px' }" @click="othenBtnTwo(item)" v-if="config.othenBtnTwo" />
              <PlusSquareOutlined :style="{ fontSize: '18px' }" @click="othenBtnThree(item)"
                v-if="config.othenBtnThree" />
              <TransactionOutlined :style="{ fontSize: '18px' }" @click="othenBtnFour(item)"
                v-if="config.addwallet" />
            </template>
            <a-list-item-meta :description="item[config.subtitle]">
              <template #title>
                {{ item[config.title] }}
              </template>
              <!-- <template #avatar>
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
          </template> -->
            </a-list-item-meta>
            <template v-for="(content, index) in config.content">
              <div>{{ content['key'] }} : {{ item[content['value']] }}</div>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
    <div class="pagination-warp" style="display: flex;justify-content: space-between;">
      <a-pagination simple show-size-changer :current="state.page.pageNum" :pageSize="state.page.pageSize"
        :total="config.total" @change="onHandleCurrentChange" @showSizeChange="onHandleSizeChange" />
      <a-button type="primary" v-if="config.submit" @click="onSubmit">提交</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import {
  EditOutlined, DeleteOutlined, TabletOutlined, DiffOutlined, TransactionOutlined,
  PlusSquareOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  config: {
    type: Object,
    default: () => { },
  }
});
const emit = defineEmits(['othenBtnOne', 'othenBtnTwo', 'edit', 'del', 'pageChange', 'onSubmit', 'othenBtnThree', 'addwallet'])

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  }
})

const othenBtnOne = (row: any) => {
  emit('othenBtnOne', row)
}

const othenBtnTwo = (row: any) => {
  emit('othenBtnTwo', row)
}
const othenBtnThree = (row: any) => {
  emit('othenBtnThree', row)
}
const othenBtnFour = (row: any) => {
  emit('addwallet', row)
}

const edit = (row: any) => {
  emit('edit', row)
}

const del = (row: any) => {
  emit('del', row)
}

const onSubmit = () => {
  emit('onSubmit')
}
const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  emit('pageChange', state.page);
};

const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  emit('pageChange', state.page);
};
</script>

<style lang="less" scoped>
.noo {
  height: calc(100vh - 90px);

  .no {
    height: calc(100vh - 142px);
    overflow-y: scroll;
    border-radius: 4px;

    :deep(.ant-list-vertical .ant-list-item .ant-list-item-action) {
      margin: 0 !important;
    }

    :deep(.ant-list-vertical .ant-list-item .ant-list-item-meta) {
      margin-bottom: 12px !important;
    }
  }

}

.pagination-warp {
  margin-top: 20px;

  :deep(.ant-pagination.ant-pagination-simple .ant-pagination-next .ant-pagination-item-link) {
    height: 32px !important;
  }

  :deep(.ant-pagination.ant-pagination-simple .ant-pagination-prev .ant-pagination-item-link) {
    height: 32px !important;
  }

  :deep(.ant-pagination) {
    line-height: 32px !important;
  }
}

.demo-loadmore-list {
  :deep(.ant-list-item-action) {
    text-align: right !important;
  }

  :deep(.ant-list-item) {
    background-color: #fff !important;
    border-radius: 4px;
  }

  :deep(.ant-list-item-meta-title) {
    margin: 0 !important
  }

  :deep(.ant-list-item) {
    padding: 12px 10px !important;
  }

}
</style>
